<html>

<head>
    <meta charset="utf-8">
    <!-- 开发环境版本1，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>

</head>

<body>
    <div id="app">
        <p v-cloak>{{ msg }}</p>
        <p v-text="msg2"></p>
        <input type="button" value="按钮" v-bind:title="mytitle + '123'" @click="show">

        <input type="button" value="开始" @click="start">
        <input type="button" value="停止" @click="stop">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello world',
                msg2: '对于生成UUID，大家可以谷歌一下，直接通过 mac 终端生成 32 位 UUID。',
                mytitle: '自定义标题',
                intervalId:null
            },
            methods: {
                show: function () {
                    alert('hello')
                },
                start() {
                    if(this.intervalId !=null) return;
                    // var _this = this
                    this.intervalId = setInterval(() => {
                        console.log(this.msg2);
                        var startstr = this.msg2.substring(0, 1)
                        var endstr = this.msg2.substring(1)
                        this.msg2 = endstr + startstr
                    }, 400)

                },
                stop() {
                    clearInterval(this.intervalId)
                    console.log(this.msg2);
                    this.intervalId = null               }

            },
        })
    </script>
</body>


</html>